/** 软件用户表格部件
 * Author:      huoxj 
 * CreateTime:  2023/8/11 16:00:06 
 * LastEditor:  huoxj 
 * ModifyTime:  2023/12/5 19:30:01 
 * Description: 
 * */
<template>
  <div class="tableBox" :style="{width:props.width , height:props.height}" >

    <div style="text-align: center;margin: 0 auto;font-weight: bolder;font-size: 18px;margin-bottom: 1vh">软件-用户使用统计表</div>

    <div class="tableHeader">
      <div style="width: 7vw;text-align: center">公司名称</div>
      <div style="width: 3vw;text-align: center">用户数量</div>
      <!-- <div style="width: 3vw;text-align: center">使用频次</div> -->
    </div>

    <div class="tableBody" :class="{'color-box':!index}" @click="selectRow(item,index)" v-for="(item,index) in tableData">
      <div style="width: 7vw;text-align: center">{{ item.name }}</div>
      <div style="width: 3vw;text-align: center">{{item.userCount}}</div>
      <!-- <div style="width: 3vw;text-align: center">{{ item.frequency }}</div> -->
    </div>

  </div>
</template>
<script setup lang="ts">
import { ref  , Ref , onMounted, reactive , watchEffect} from 'vue';
import { useECharts } from '/@/hooks/web/useECharts';
import {defHttp} from "/@/utils/http/axios";

const props = defineProps(['width' , 'height' , 'software']);

// 湛江
// 上海
// 北京
// 天津
// 深圳
// 国际
// 软件名
// 许可证名
// 许可证中心
// 非常规油气
// 其他
// 海油发展

const tableData = ref([
//   {
//   name: '北京',//BJ--北京
//   userCount: 73,
//   frequency: 909
// }, {
//   name: '天津',//TJ-天津
//   userCount: 46,
//   frequency: 524
// },{
//   name: '上海',//SH-上海
//   userCount: 30,
//   frequency: 433
// },{
//   name: '深圳',//SZ-深圳
//   userCount: 27,
//   frequency: 448
// },{
//   name: '湛江',//湛江-ZJ
//   userCount: 36,
//   frequency: 689
// },{
//   name: '国际',
//   userCount: 42,
//   frequency: 608
// },{
//   name: '非常规油气',
//   userCount: 5,
//   frequency: 101
// },{
//   name: '其他',
//   userCount: 14,
//   frequency: 98
// },{
//   name: '海油发展',
//   userCount: 14,
//   frequency: 98
// }
])


const emit = defineEmits(['onChange']);

function selectRow(row,index){
  let arr = document.querySelectorAll('.tableBody');
  for (var i = 0; i < arr.length; i++) {
    arr[i].className = "tableBody";
  }

  document.querySelectorAll('.tableBody')[index].className = "tableBody color-box "

  emit('onChange', row);
}

watchEffect(() => {
  getTableData();
});

onMounted(()=>{
    setInterval(function () {
      getTableData();
    }, 3600000);  
  }
);

function getTableData(){
  let api = "/j_monitoring/licenseSoftware/readSoftwareUserJson";
  let params = {};
  let options = {isTransformResponse: false};
  defHttp.get({url: api, params}, options)
    .then((res) => {
      if (res.success) {
        let val = JSON.parse(res.result.value||'{}')||{userList:[]};    
        let list = val.userList ? val.userList : [];
        list.sort((a, b) => {
          return (a.sortNo || 0) - (b.sortNo || 0);
        });
        tableData.value = list;
      } else {
        console.log('接口错误用默认');
      }
    }).finally(() => {
      
    });
}

</script>


<style>
.tableBox{
  color: white;
}

.tableHeader{
  display: flex;
  flex-direction: row;
}
.tableBody{

  /*padding: 20px;*/
  padding-top: 1vh;
  padding-bottom: 1vh;
  display: flex;
  border-bottom: 1px solid #6d8aa9;
  flex-direction: row;
}

.tableBody:hover{
  cursor: pointer;
  background-color: rgba(0,60,153,0.5); /*鼠标移上链接变为红色*/
}

.color-box{
  background-color: rgba(0,60,153,0.5);
}


</style>
